import './ProjectDetail.scss'
import { useState, useRef } from 'react'
import { ProTable } from '@ant-design/pro-components'
import { useMount, useRequest, useSize } from 'ahooks'
import { Button } from 'antd'

import { Http } from '../../../../Common/Api'

import { commonTableList } from '../../../../Common/Router/MenuNav/Common/common'
import { EnumComments } from '../../../../Common/Router/MenuNav/Common/Conversion'
import { FrontModalBox } from '.'

const SumMapping = [
    { uuid: 1, label: '中标金额' },
    { uuid: 4, label: '合同金额' },
    { uuid: 2, label: '总体收入' },
    { uuid: 3, label: '本年收入' },
]
export const ProjectDetail = ({ data }) => {
    const { engineeringType, address } = data
    const actionRef = useRef()
    const TableBox = useRef()
    const size = useSize(TableBox)
    const [Active, setActive] = useState('')
    const [BranchCompany, setBranchCompany] = useState([])
    const [Columns, setColumns] = useState()
    const [SummaryList, setSummaryList] = useState({ 中标金额: '0.00', 总体收入: '0.00', 本年收入: '0.00' })
    const [IndexNumber, setIndexNumber] = useState(1)
    const [SizeNumber, setSizeNumber] = useState(10)
    const [OptionsCall, steOptionsCall] = useState()

    const { runAsync: getBranchCompany } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setActive(res.list[0].uuid)
            setBranchCompany(res.list)
        },
    })

    const { runAsync: getData } = useRequest(Http, { manual: true })

    const columns = async () => {
        const ClientData = JSON.parse(window.localStorage.getItem('ClientData'))

        return [
            commonTableList.uuid,
            { ...commonTableList.fullName, width: 320, ellipsis: false, align: 'center' },
            {
                dataIndex: 'projectManager',
                title: '项目经理',
                valueType: 'input',
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'owner',
                title: '业主名称',
                valueType: 'input',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'acceptanceAmount',
                title: '中标金额',
                valueType: 'input',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: '总体收入',
                title: '总体收入',
                valueType: 'input',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: '本年收入',
                title: '本年收入',
                valueType: 'input',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'winningBidder',
                title: '中标单位',
                valueType: 'input',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'construction',
                title: '施工单位',
                valueType: 'input',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },

            {
                dataIndex: 'contractStartDate',
                title: '合同开始时间',
                valueType: 'Date',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'contractEndDate',
                title: '合同结束时间',
                valueType: 'Date',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'workStartDate',
                title: '开工日期',
                valueType: 'Date',
                hideInSearch: true,
                width: 200,
                align: 'center',
            },
            {
                dataIndex: 'engineeringStatus',
                title: '工程状态',
                valueType: 'select',
                width: 100,
                valueEnum: await EnumComments('engineeringStatus'),
                align: 'center',
            },
            {
                dataIndex: 'engineeringType',
                title: '工程类型',
                valueType: 'select',
                valueEnum: ClientData.dictionary['3b863e8d-4476-44e2-b487-96d0a948a080'],
                ellipsis: true,
                hideInTable: true,
                width: 200,
                initialValue: engineeringType,
            },
            {
                dataIndex: 'address',
                title: '地市',
                valueType: 'select',
                valueEnum: ClientData.dictionary['ff17b144-6a23-4b0d-84a5-9aab9f52225b'],
                ellipsis: true,
                hideInTable: true,
                width: 200,
                initialValue: address,
            },
            {
                title: '操作',
                valueType: 'systemOperation',
                fixed: 'right',
                align: 'center',
                width: 100,
                hideInSearch: true,
                hideInAdded: true,
                hideInModify: true,
                render: (_, record) => {
                    const { organizationUuid } = record
                    return [
                        <Button
                            key="one"
                            type="link"
                            onClick={() =>
                                steOptionsCall({
                                    type: 'APIAnnexModal',
                                    data: { title: '项目简介', uuid: organizationUuid },
                                })
                            }
                        >
                            项目简介
                        </Button>,
                        <Button
                            key="two"
                            type="link"
                            onClick={() => (window.location.href = `/Front/Page/OneOne?uuid=${organizationUuid}`)}
                        >
                            项目详情
                        </Button>,
                    ]
                },
            },
        ]
    }

    const onActive = e => {
        setActive(e)
        actionRef.current.reload()
    }

    useMount(async () => {
        getBranchCompany({ url: 'getBranchCompany', data: { isEnabled: 1 } })
        setColumns(await columns())
    })

    const getRequest = async e => {
        const { current, ...item } = e
        const data = {
            pageIndex: current,
            ...item,
            parentOrganizationUuid: Active,
            isEnabled: 1,
        }
        return getData({ url: 'getEngineeringOrganizationListByCompanyUuid', data }).then(res => {
            setSummaryList(res.summaryList)
            return { data: res.list, total: res.total, success: true }
        })
    }

    return (
        <div className="ProjectDetail">
            <div className="Left">
                {BranchCompany.map(({ uuid, tableName, organizationCount }) => (
                    <div key={uuid} className={Active === uuid ? 'active' : ''} onClick={() => onActive(uuid)}>
                        <div>{tableName}</div>
                        <div>{organizationCount}</div>
                    </div>
                ))}
            </div>
            <div className="Right" ref={TableBox}>
                {size && Columns && (
                    <ProTable
                        rowKey="uuid"
                        actionRef={actionRef}
                        columns={Columns}
                        request={e => getRequest(e)}
                        pagination={{
                            pageSize: SizeNumber,
                            showSizeChanger: true,
                            onChange: (e, a) => {
                                setIndexNumber(e)
                                setSizeNumber(a)
                            },
                        }}
                        headerTitle={
                            <div className="headerTitle">
                                {SumMapping.map(({ uuid, label }) => (
                                    <div key={uuid}>
                                        <span>{label} : </span>
                                        <span>{SummaryList[label]}</span>
                                        <span>万元</span>
                                    </div>
                                ))}
                            </div>
                        }
                        scroll={(() => {
                            let { width: x, height } = size
                            let y = height - 265
                            return { x, y }
                        })()}
                    />
                )}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
